<template>
  <div class="container">
    <div class="box edition-heart">
      <Bread />
      <div class="top">
        <div class="left">
          <div class="left-left">
            <div class="left-top-top">
              <img
                :src="proxy.$url + getData.productInfo?.imgAltas[imgNum].src"
                alt=""
                width="459"
                height="459"
              />
            </div>
            <div class="left-top-bottom">
              <img
                :src="proxy.$url + item.src"
                alt=""
                width="100"
                height="100"
                v-for="(item, index) in getData.productInfo?.imgAltas"
                :key="item.name"
                @mouseenter="imgNum = index"
              />
            </div>
          </div>
          <div class="left-right">
            <h2>{{ getData.productInfo?.name }}</h2>
            <h3>{{ getData.productInfo?.seriesSubTitle }}</h3>
            <p>{{ getData.productInfo?.coin }}积分</p>
            <ul class="color">
              <li
                v-for="item in getData.productInfo?.parameterJson"
                :key="item.name"
              >
                {{ item.title }}
              </li>
            </ul>
            <ul class="more">
              <li
                :class="{ active: item.currentActivate }"
                v-for="item in getData.productInfo?.parameterJson[0].parameters"
                :key="item.id"
                @click="toDetailsFn(item.id)"
              >
                {{ item.title }}
              </li>
            </ul>
            <h3 style="font-size: 16px; color: #000; font-weight: 300;">
              数量
            </h3>
            <div class="count">
              <button @click="changeCount(1)">
                +
              </button>
              <button>{{ getData.productInfo?.status }}</button>
              <button @click="changeCount(-1)">
                -
              </button>
            </div>
            <div class="button">
              <button @click="addCartFn">加入购物车</button>
              <button @click="toast({ str: '功能未开放！', type: 'warn' })">
                立即购买
              </button>
            </div>
          </div>
        </div>
        <div class="right">
          <h3>你还可以兑换</h3>
          <ul>
            <li
              v-for="item in getData.themYouCanBuy"
              :key="item.id"
              @click="toDetailsFn(item.id)"
            >
              <img
                class="img"
                :src="proxy.$url + item.img"
                alt=""
                width="81"
                height="94"
              />
              <div>
                <div class="title">{{ item.name }}</div>
                <div class="ctx">
                  <span>{{ item.coin }}</span>
                  <img
                    src="../../../public/images/monad.png"
                    alt=""
                    width="30"
                    height="30"
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <div class="title">
          <button :class="{ 'button-active': show }" @click="show = true">
            商品详情
          </button>
          <button :class="{ 'button-active': !show }" @click="show = false">
            常见问题
          </button>
        </div>
        <div class="con" v-show="show">
          <div v-html="htmlDom"></div>
        </div>
        <div class="con-tow" v-show="!show">
          <!-- 常见问题的内容盒子 -->
          <h4>兑换后运费如何收取？</h4>
          <p>
            商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。
          </p>
          <p class="mb20">
            （注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）
          </p>
          <h4>如何申请退换货？</h4>
          <p>所有产品均为鸡腿兑换礼品，无质量问题不支持退换货；</p>
          <p>如因喜好不同，或到货后后悔等原因，不支持退货；</p>
          <p>
            因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，叩丁狼均不进行补发或赔付；
          </p>
          <p>
            如因质量问题需要退货，将由客服人员与客户联系，确认邮寄地址与流程。退回物品不得有人为损坏或使用痕迹，否则拒绝退换；
          </p>
          <p class="mb20">
            如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，叩丁狼将以鸡腿发放形式为用户报销运费，不接受单方面到付件。
          </p>
          <h4>如何开具发票？</h4>
          <p>
            叩丁狼积分商城产品均为定制礼品，使用积分兑换的产品均不支持开票。
          </p>
          <h4>关于鸡腿价格问题</h4>
          <p class="mb20">
            因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺兑换。
          </p>
          <h4>联系我们</h4>
          <p>www.wolfcode.cn</p>
          <p class="mb20">微信公众号搜索“叩丁狼”</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Bread from '@/components/bread/bread.vue'
import { ApiProducts, ApiCartAdd } from './api'
import { useRoute, useRouter } from 'vue-router'
import { ref, reactive, getCurrentInstance, inject } from 'vue'
import toast from '@/components/toast'

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance() as { proxy: any }

const show = ref<boolean>(true)
const { key } = inject('data') as { key: any }

const imgNum = ref<number>(0)
const htmlDom = ref<string>('')

// 接收数据
const getData = reactive<IDetailsData>({})

// 请求数据
const getValue = (id: string) => {
  ApiProducts(id).then((res) => {
    if (res.code === 0) {
      Object.assign(getData, res.data)
      htmlDom.value = getData.productInfo?.description.replaceAll(
        'upload',
        proxy.$url + '/upload/',
      )!
      let a = getData.productInfo?.description.replaceAll(
        'upload',
        proxy.$url + '/upload/',
      )
      console.log(a)
    }
  })
}
getValue(route.params.id as string)

// 数量
const changeCount = (val: number) => {
  if (val === -1 && getData.productInfo?.status === 1) return
  getData.productInfo!.status += val
}

// 跳转其他商品的详情页
const toDetailsFn = (id: number) => {
  router.push({ path: `/details/${id}` })
  getValue(String(id))
}

// 加入购物车
const addCartFn = () => {
  ApiCartAdd({
    productId: getData.productInfo?.id!,
    total: getData.productInfo?.status!,
  }).then((res) => {
    if (res.code === 0) {
      key.value += 1
      toast({ str: '已添加至购物车', type: 'success' })
    } else {
      toast({ str: res.message, type: 'warn' })
    }
  })
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f5f5f5;
  .box {
    .top {
      display: flex;
      justify-content: space-between;
      padding-bottom: 53px;
      .left {
        width: 970px;
        display: flex;
        .left-left {
          margin-right: 32px;
          .left-top-bottom {
            width: 459px;
            display: flex;
            justify-content: space-between;
          }
        }
        .left-right {
          h2 {
            font-size: 28px;
            font-weight: 300;
          }
          h3 {
            font-size: 14px;
            color: #999;
            margin: 15px 0 26px;
          }
          p {
            font-size: 28px;
            font-weight: 700;
            color: #fd604d;
            padding-bottom: 23px;
          }
          .color {
            margin: 19px 0 14px;
          }
          .more {
            display: flex;
            flex-wrap: wrap;
            .active {
              color: #0a328e;
              border-color: #0a328e;
            }
            li {
              padding: 0 17px;
              border: 1px solid #d1d1d1;
              color: #666;
              font-size: 18px;
              margin: 0 20px 11px 0;
              cursor: pointer;
            }
          }
          .count {
            button {
              &:nth-of-type(1),
              &:nth-of-type(3) {
                background-color: #fff;
                width: 30px;
                height: 30px;
                border: 1px solid #d1d1d1;
                color: #999;
              }
              &:nth-of-type(2) {
                border: none;
                width: 45px;
                height: 30px;
                border-top: 1px solid #d1d1d1;
                border-bottom: 1px solid #d1d1d1;
                background-color: #fafafa;
              }
            }
          }
          .button {
            button {
              width: 150px;
              height: 46px;
              line-height: 46px;
              text-align: center;
              margin-top: 26px;
              border: none;
              color: #fff;
              font-size: 18px;
              &:first-child {
                background-color: #3dc36b;
                margin-right: 20px;
              }
              &:last-child {
                background-color: #fd604d;
              }
            }
          }
        }
      }
      .right {
        h3 {
          font-size: 18px;
          font-weight: 300;
          padding-bottom: 20px;
        }
        ul {
          li {
            display: flex;
            margin-bottom: 30px;
            &:hover {
              .img {
                border: 1px solid #0a328e;
                box-sizing: border-box;
              }
              .title {
                color: #0a328e;
              }
            }
            div {
              margin-left: 10px;
              text-align: left;
              .title {
                padding-bottom: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .ctx {
                display: flex;
                align-items: center;
                span {
                  font-size: 18px;
                  font-weight: 700;
                  color: #fd604d;
                  padding-right: 20px;
                }
              }
            }
          }
        }
      }
    }
    .bottom {
      .title {
        .button-active {
          background-color: #0a328e;
          color: #fff;
        }
        button {
          width: 120px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          font-size: 18px;
          font-weight: bold;
          background-color: #fff;
          border: none;
        }
      }
      .con-tow {
        padding-bottom: 40px;
        h4 {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 10px;
          margin-top: 20px;
        }
        p {
          line-height: 1.4em;
        }
      }
    }
  }
}
</style>
